<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('诊断书')" />
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <div class="container-div">
        <h1 th:text="${viewTitle}"></h1>
        <form class="form-horizontal m" id="form-grade-edit" th:object="${creditGrade}">
            <input name="id" th:field="*{id}" type="hidden">
            <div style="text-align:right;">
                <a class="btn btn-primary btn-rounded btn-sm" shiro:hasPermission="system:diagnose:edit" style="margin-top:10px;" onclick="submitHandler()">
                    保存
                </a>
                <br>
            </div>
            <div class="col-sm-12 select-table table-bordered">
                <div>
                    <label id="grade_name" style="font-weight: bold;"></label>
                </div>
                <table id="bootstrap-table"></table>
            </div>
            <h4 class="form-header h4">&nbsp;&nbsp;</h4>
            <div class="form-group">
                <label class="col-sm-2 control-label">诊断书备注：</label>
                <div class="col-sm-8">
                    <textarea name="diagnoseRemark" th:field="*{diagnoseRemark}" maxlength="1000" class="form-control" rows="10"></textarea>
                </div>
            </div>

            <div style="text-align:right;">
                <a class="btn btn-primary btn-rounded btn-sm" shiro:hasPermission="system:diagnose:edit" style="margin-top:10px;" onclick="submitHandler()">
                     保存
                </a>
            </div>
        </form>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: summernote-js" />
<script th:inline="javascript">
		var prefix = ctx + "system/grade";
        var editGradeId = [[${editGradeId}]];

        function submitHandler() {
            if ($.validate.form()) {
                //$.operate.save(prefix + "/editDiagnose", $('#form-grade-add').serialize() +'&'+$.param({'id': editGradeId}) );
                $.operate.save(prefix + "/editDiagnose", $('#form-grade-edit').serialize());

                $.modal.closeTab();
            }
        }
        $(function() {
		    ajaxTable([[${editGradeId}]]);
		});

		// 动态获取列
        function ajaxTable(gradeId) {
        	var url = ctx + "system/grade/getTemplateDiagnoseById";
        	//$('#bootstrap-table').empty();
        	$('#bootstrap-table').bootstrapTable('destroy');

            $.modal.loading("正在查询中，请稍后...");
            $.post(url, {"id": gradeId}, function(result) {
                if (result.code == web_status.SUCCESS) {
                	setColumns(result.data,gradeId);
                } else if (result.code == web_status.WARNING) {
                    $.modal.alertWarning(result.msg)
                } else {
                    $.modal.alertError(result.msg);
                }
                $.modal.closeLoading();
            });
        }
      	// 设置列
        function setColumns(list,gradeId) {
        	var columns = [];
        	list.forEach(function(item) {
        	    if($.common.equals('score',item.field)){
        	    	columns.push(
                    {
                        field: 'score',
                        align: 'center',
                        title: '自评分',
                        width:70,
                        title : item.title
                    });
        	    }else if($.common.equals('remark',item.field)){
        	    	columns.push(
                    {
                        field: 'remark',
                        align: 'center',
                        title: '备注',
                        width:200,
                        title : item.title
                    });
        	    }
        	    /*else if($.common.equals('diagnoseRemark',item.field)){
                    columns.push(
                        {
                            field: 'diagnoseRemark',
                            align: 'center',
                            title: '诊断书备注',
                            width:200,
                            formatter: function(value, row, index) {
                                var html = $.common.sprintf("<textarea maxlength='500' class='form-control' rows='3' name='diagnoseRemark[%s]' >"+value+"</textarea>", index, 0);
                                return html;
                            }
                        });
                }*/
        	    else {
        	    	columns.push({
        	    		field : item.field,
    					title : item.title
        	    	})
        	    }
        	});
        	initTable(columns,gradeId);

        }
      	// 刷新表格
        function refreshTable(columns) {
        	var options = {
        		columns: columns
        	};
        	$("#" + table.options.id).bootstrapTable('refreshOptions',options);
        }
      	// 初始化表格
        function initTable(columns,gradeId){
        	var options = {
        		url: ctx + "system/grade/getGradeItemsDiagnoseByGradeId?id="+gradeId,
            	showSearch: false,
            	showRefresh: false,
            	showToggle: false,
            	showColumns: false,
            	pagination:false,

            	columns: columns,
            	onLoadSuccess : function(data) {
                    var data = $('#bootstrap-table').bootstrapTable(
                            'getData', true);
                    //合并单元格
                    columns.forEach(function(item) {
                        if($.common.equals('firstColumn',item.field)){
                            mergeCells($('#bootstrap-table'), data, "firstColumn", ["firstColumn"]);
                        } else if($.common.equals('secondColumn',item.field)){
                            mergeCells($('#bootstrap-table'), data, "secondColumn", ["firstColumn","secondColumn"]);
                        }else if($.common.equals('threeColumn',item.field)){
                            mergeCells($('#bootstrap-table'), data, "threeColumn", ["firstColumn","secondColumn","threeColumn"]);
                        }else if($.common.equals('fourColumn',item.field)){
                            mergeCells($('#bootstrap-table'), data, "fourColumn", ["firstColumn","secondColumn","threeColumn","fourColumn"]);
                        }else if($.common.equals('fiveColumn',item.field)){
                            mergeCells($('#bootstrap-table'), data, "fiveColumn", ["firstColumn","secondColumn","threeColumn","fourColumn","fiveColumn"]);
                        }else if($.common.equals('sixColumn',item.field)){
                            mergeCells($('#bootstrap-table'), data, "sixColumn", ["firstColumn","secondColumn","threeColumn","fourColumn","fiveColumn","sixColumn"]);
                        }
                    });
                }
            };
            $.table.init(options);
        }



        /**
		 * 合并单元格
		 * @param data 原始数据(在服务端完成排序)
		 * @param fieldName 合并属性名称
		 * @param colspan 合并列
		 * @param target 目标表格对象
		 */
		function mergeCells(target, data, fieldName, beforFields) {
			//声明一个map计算相同属性值在data对象出现的次数和
			var sortMap = {};
			for (var i = 0; i < data.length; i++) {
                var key='';
				for(var j=0;j< beforFields.length;j++){
					var beforField = beforFields[j];
					key += data[i][beforField];
				}

                if (sortMap.hasOwnProperty(key)) {
                    sortMap[key] = sortMap[key] * 1 + 1;
                } else {
                    sortMap[key] = 1;
                }
			}
			for ( var prop in sortMap) {
				console.log(prop, sortMap[prop])
			}
			var index = 0;
			for ( var prop in sortMap) {
				var count = sortMap[prop] * 1;
				$(target).bootstrapTable('mergeCells', {
					index : index,
					field : fieldName,
					colspan : 1,
					rowspan : count
				});
				index += count;
			}
		}

	</script>
</body>

</html>